<template>
	<view class="contain">
		<view class="totalData">
			<view class="selet">
				<view class="" @click="openPick">
					{{columnsValue}} ▼
				</view>
				
			</view>
			<view class="total">
				<view>0份</view>
				<view style="font-size: 14px;color: #a3a3a3;font-weight: 400;margin-top: 5px;">已成册</view>
			</view>
		</view>
		<view class="listAll">
			<view class="list" @click="goItem(item)" v-for="(item, index) in list" :key="index">
				<view class="">
					{{item.className}}
				</view>
				<view class="num">
					已成册{{item.num}}份
				</view>
				<text class="rightArrow">〉</text>
			</view>
		</view>
		<u-picker ref="uPicker" :closeOnClickOverlay='true' @cancel='cancel' @confirm="confirm" @change="changeHandler" @close="close" :show="show"
			:columns="columns"></u-picker>
	</view>
</template>
<script>
	export default {
		data() {
			return {

				list: [{
						className: '小二班',
						num: '6'
					},
					{
						className: '小三班',
						num: '8'
					}
				],
				show: false,
				columnsValue:'2023-2024年上学期',
				columns: [
					['2023-2024年上学期', '2023-2024年下学期',]
				],

			};
		},
		methods: {
			openPick(){
				this.show = true
			},
			change() {

			},
			cancel(){
				this.show = false
			},
			changeHandler(e) {
				console.log('changeHandler', e)
			},
			// 回调参数为包含columnIndex、value、values
			confirm(e) {
				console.log('confirm', e)
				this.columnsValue=e.value[0]
				this.show = false
			},
			close(){
				this.show = false
			},
			goItem(it){
				uni.navigateTo({
					url:'classList?it='+JSON.stringify(it)
				})
				
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		height: 100%;
	}
	.totalData{
		width: 100%;
		height: 30%;
		background-color: #fff;
		margin-bottom: 10px;
		padding-bottom: 20px;
	}
	.listAll{
		width: 100%;
		height: 70%;
		background-color: #fff;
	}
	.total{
		text-align: center;
		margin-top: 20px;
		font-size: 30px;
		font-weight: 700;
	}
	.selet{
		height: 50px;
		display: flex;
		padding: 10px 30px;
		justify-content: space-between;
	}
	.contain {
		// background-color: #fff;
		width: 100%;
		height: 100%;
		padding: 20px 0;
		box-sizing: border-box;
	}

	.list {
		display: flex;
		padding: 10px 20px;
		
		justify-content: space-between;
		background-color: #fff;
	}

	.num {
		color: #a3a3a3;
		font-size: 12px
	}

	.rightArrow {
		color: #a3a3a3;
		font-size: 12px
	}
</style>